<template>
  <div class="components-container">
    <div class="report-analysis-container">
      <div class="analysis-filter-container">
        <el-button type="primary" size="small" @click="showDialog('create')"
          >创建</el-button
        >
      </div>

      <Tips :tips="tips" />
      <el-table
        :data="tableData"
        v-loading.body="tableLoading"
        element-loading-text="拼命加载中"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="ID"
          prop="id"
          width="100px"
        ></el-table-column>
        <el-table-column
          align="center"
          label="编码"
          prop="analysisKey"
        ></el-table-column>
        <el-table-column
          align="center"
          label="名称"
          prop="analysisName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="描述"
          prop="analysisDesc"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <a
              size="mini"
              class="click-btn"
              @click="showDialog('update', scope.row)"
              type="primary"
              >编辑</a
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="padding: 5px 0;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="tableQuery.pageNo"
          :page-sizes="[10, 20, 50]"
          :page-size="tableQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <el-dialog
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :title="formTitle"
        :visible.sync="formVisible"
        width="600px"
      >
        <el-form
          class="small-space"
          :model="createdItem"
          label-position="right"
          label-width="100px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="编码">
            <el-input
              size="small"
              v-model="createdItem.analysisKey"
              placeholder="请输入编码"
              maxlength="50"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input
              size="small"
              v-model="createdItem.analysisName"
              placeholder="请输入名称"
              maxlength="50"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              size="small"
              type="textarea"
              v-model="createdItem.analysisDesc"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="save"
            :loading="formSubmit"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Tips from '@/views/report/Components/Tips/index'
import { list, update, create } from '@/api/report/analysis'
const defaultPage = {
  pageSize: 10,
  pageNo: 1
}
const defaultCreateQuery = {
  analysisKey: '',
  analysisName: '',
  analysisDesc: ''
}
export default {
  name: 'reportAnalysis',
  data() {
    return {
      // 操作提示
      tips: {
        text: ''
      },

      // 查询条件
      tableQuery: Object.assign({}, defaultPage),
      createdItem: Object.assign({}, defaultCreateQuery),

      total: null,
      tableData: [],
      tableLoading: true,

      formTitle: '',
      formVisible: false,
      formSubmit: false
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  computed: {},
  components: {
    Tips
  },
  methods: {
    // 获取列表
    getList() {
      this.tableLoading = true
      list({
        data: this.tableQuery
      })
        .then(response => {
          this.tableLoading = false
          let { records, total } = response.data
          this.tableData = records
          this.total = total
        })
        .catch(error => {
          console.log(error)
          this.tableLoading = false
          Object.assign(this.tips, {
            show: true,
            text: error,
            type: 'error'
          })
        })
    },

    handleSizeChange(val) {
      this.tableQuery.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.tableQuery.pageNo = val
      this.getList()
    },

    // 新增，修改弹窗
    showDialog(type, row = null) {
      this.formVisible = true
      this.formSubmit = false
      this.clearDialog()
      if (type === 'create') {
        this.formTitle = '创建'
      } else {
        this.formTitle = '编辑'

        for (var i in this.createdItem) {
          this.createdItem[i] = row[i]
        }
        this.createdItem['id'] = row['id'] ? row['id'] : ''
      }
    },

    // 初始化弹窗
    clearDialog() {
      this.createdItem = Object.assign({}, defaultCreateQuery)
    },

    close() {
      this.formVisible = false
    },

    validate() {
      let { analysisKey, analysisName, analysisDesc } = this.createdItem
      if (!analysisKey) {
        this.$message.error('请填写编码')
        return true
      }
      if (!analysisName) {
        this.$message.error('请填写名称')
        return true
      }
      if (!analysisDesc) {
        this.$message.error('请填写描述')
        return true
      }
      return false
    },

    save() {
      if (this.validate()) return
      let type = this.createdItem.id ? 'update' : 'create'

      this.formSubmit = true
      if (type === 'update') {
        update({
          data: this.createdItem
        })
          .then(response => {
            this.close()
            this.getList()
          })
          .catch(error => {
            this.$message.error(error)
            this.formSubmit = false
          })
      } else {
        create({
          data: this.createdItem
        })
          .then(response => {
            this.close()
            this.getList()
          })
          .catch(error => {
            this.$message.error(error)
            this.formSubmit = false
          })
      }
    }
  }
}
</script>

<style lang="scss">
@import './less/index.scss';
</style>
